<template>
  <body>
    <div id="College">
      <div class="content">
        <div class="menuTitle">
          <!-- 面包屑 -->
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>数据查询</el-breadcrumb-item>
            <el-breadcrumb-item>院校查询</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="searchArea">
          <div class="searchinput">
            <input
              type="text"
              placeholder="  请输入院校名称"
              v-model="schoolname"
              @blur="blur"
              maxlength="12"
              minlength="0"
            />
            <button @click="search">搜索</button>
            <span style="color: rgba(255, 0, 0)">{{ message }}</span>
          </div>
          <div class="searchchoose">
            <ul>
              <li
                class="listSpan"
                v-for="(item, index) in chooseLists"
                :key="index"
              >
                <span class="list-key">{{ item.title }}</span>
                <div class="more-search">
                  <span
                    v-for="(type, typeIndex) in item.typeList"
                    class="linkStyle"
                    :style="{
                      color:
                        type === stateLists[index] ? 'rgba(255,101,0)' : '',
                    }"
                    @click="listBundle(type, index)"
                  >
                    {{ type }}</span
                  >
                </div>
                <div style="clear: both"></div>
              </li>
            </ul>
          </div>
        </div>
        <div class="result">
          <div id="myTable" class="public_tbl">
            <el-card
              class="line"
              v-for="(item, index) in resultLists"
              :key="index"
              shadow="hover"
            >
              <div class="school_icon">
                <img :src="item.logo" alt="" />
              </div>
              <div class="name_des">
                <div class="top_item">
                  <span class="float_l set_hoverl am_l">
                    <router-link
                      :to="`/college/${item.unvId}`"
                      class="link_name clearfix"
                    >
                      {{ item.name }}
                    </router-link>
                  </span>
                  <span class="city float_l">{{ item.province }}</span>
                </div>
                <div class="bottom_item">
                  <span class="tag_item">{{ item.category }}</span>
                  <span class="tag_item">{{ item.is985 }}</span>
                  <span class="tag_item">{{ item.is211 }}</span>
                  <span class="tag_item" style="border: none">{{
                    item.feature
                  }}</span>
                </div>
              </div>
              <el-button
                style="
                  margin-top: 10px;
                  width: 80px;
                  margin-right: 10px;
                  float: right;
                "
                :class="item.isCollection === '1' ? 'newStyle' : 'oldStyle'"
                @click="changeStyle(item, index)"
                ><span v-if="item.isCollection !== '1'"> + 收藏</span>
                <span v-else-if="item.isCollection === '1'">已收藏</span>
              </el-button>
            </el-card>
          </div>
        </div>
        <el-pagination
          class="pagination"
          @current-change="handleCurrentChange"
          :current-page="pagination.page"
          :page-size="pagination.size"
          layout="total, prev, pager, next"
          :total="pagination.count"
          background
        >
        </el-pagination>
      </div>
    </div>
  </body>
</template>

<script>
import qs from "qs";
import throttling from "@/public/throttling.js";
export default {
  name: "college",
  props: ["id"],
  data() {
    return {
      // 有效性验证
      message: "",
      // 是否出现加载图标
      loading: "",
      // 自适应宽度
      screenWidth: document.body.clientWidth,
      screenHeight: document.body.clientHeight,
      // 首页用户名
      firsrName: "",
      showManager: false,
      showname: false,
      //初始分页条件
      pagination: {
        page: 1,
        count: 1,
        size: 24,
      },
      stateLists: ["全部", "全部", "全部", "全部"],
      schoolname: "",
      active: 0,
      img: require("@/assets/二维码.png"),
      name: "",
      active: 0,
      CollegeLists: [],
      chooseLists: [
        {
          title: "院校所属",
          typeList: [
            "全部",
            "北京",
            "天津",
            "河北",
            "山西",
            "内蒙古",
            "辽宁",
            "吉林",
            "黑龙江",
            "上海",
            "江苏",
            "浙江",
            "安徽",
            "福建",
            "江西",
            "山东",
            "河南",
            "湖北",
            "广东",
            "广西",
            "海南",
            "重庆",
            "四川",
            "贵州",
            "云南",
            "西藏",
            "陕西",
            "甘肃",
            "青海",
            "宁夏",
            "新疆",
          ],
        },
        {
          title: "院校类型",
          typeList: [
            "全部",
            "综合",
            "理工",
            "农业",
            "医药",
            "师范",
            "语言",
            "财经",
            "政法",
            "体育",
            "艺术",
            "民族",
            "军事",
            "其他",
          ],
        },
        {
          title: "办学类型",
          typeList: ["全部", "普通本科", "专科"],
        },
        {
          title: "院校特色",
          typeList: ["全部", "985", "211", "双一流"],
        },
      ],
      resultLists: [],
    };
  },
  methods: {
    // 是否收藏
    // 按钮是否变样式
    changeStyle: throttling(function (item, index) {
      if (item.isCollection === "0") {
        this.$axios
          .post(
            "/saveCollection",
            qs.stringify({
              unvId: item.unvId,
            })
          )
          .then((res) => {
            console.log(res);
            if (res.data.code === 400) {
              this.$message.error("请先登录！");
              this.$router.replace("/login");
            } else {
              item.isCollection = "1";
            }
          });
      } else {
        this.$axios.delete("/deleteCollection/" + item.unvId).then((res) => {
          item.isCollection = "0";
        });
      }
    }, 100),
    // 出现加载
    startLoading() {
      this.loading = true;
    },
    endLoading() {
      this.loading = false;
    },
    // 输入失去焦点 自动获取所有数据
    blur() {
      if (this.schoolname === "") {
        this.message = "";
        this.$axios
          .get("/searchUniversity/" + this.schoolname, {
            params: {
              page: this.pagination.page,
              size: this.pagination.size,
            },
          })
          .then((res) => {
            this.resultLists = res.data.list;
            this.pagination.count = res.data.total;
          });
      }
    },
    search: throttling(function () {
      var reg = /[^\u4E00-\u9FA5]/g;
      if (this.schoolname === "") {
        this.message = "";
      } else {
        if (reg.test(this.schoolname)) {
          this.message = "只能输入汉字！";
          return;
        } else {
          this.message = "";
          this.$axios
            .get("/searchUniversity/" + this.schoolname, {
              params: {
                page: this.pagination.page,
                size: this.pagination.size,
              },
            })
            .then((res) => {
              console.log(res);
              if (res.data.status === 999) {
                this.$message.error(res.data.message);
              } else if (res.data.status === 899) {
                this.$message.error(res.data.message);
                this.$router.replace("/login");
              }
              this.resultLists = res.data.list;
              this.pagination.count = res.data.total;
            });
        }
      }
    }, 200),
    listBundle: throttling(function (type, index) {
      this.stateLists.splice(index, 1, type);
      console.log(this.stateLists[index]);
      this.$axios
        .get("/selectUniversity", {
          params: {
            province: this.stateLists[0],
            category: this.stateLists[1],
            type: this.stateLists[2],
            schoolFlag: this.stateLists[3],
            page: this.pagination.page,
            size: this.pagination.size,
          },
        })
        .then((res) => {
          console.log(res);
          if (res.status === 999) {
            this.$message.error;
          } else {
            this.resultLists = res.data.list;
            this.pagination.count = res.data.total;
          }
        });
    }, 200),
    handleCurrentChange(page) {
      this.pagination.page = page;
      this.getLists();
      console.log("跳转了");
    },
    getLists() {
      this.$axios
        .get("/selectUniversity", {
          params: {
            province: this.stateLists[0],
            category: this.stateLists[1],
            type: this.stateLists[2],
            schoolFlag: this.stateLists[3],
            page: this.pagination.page,
            size: this.pagination.size,
          },
        })
        .then((res) => {
          console.log(res);
          this.resultLists = res.data.list;
        });
    },
  },
  created() {
    if (this.screenWidth > 1300) {
      this.pagination.size = 24;
    } else {
      this.pagination.size = 16;
    }
    this.startLoading();
    this.$axios
      .get("/selectUniversity", {
        params: {
          province: this.stateLists[0],
          category: this.stateLists[1],
          type: this.stateLists[2],
          schoolFlag: this.stateLists[3],
          page: this.pagination.page,
          size: this.pagination.size,
        },
      })
      .then((res) => {
        console.log(res);
        if (res.status === 999) {
          this.$message.error(res.msg);
        } else {
          this.endLoading();
          this.resultLists = res.data.list;
          this.pagination.count = res.data.total;
        }
      });
  },
  mounted() {
    this.loading = true;
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
body {
  width: 100%;
  background-color: rgba(240, 242, 245);
}

a {
  text-decoration: none;
}

li {
  list-style: none;
}

.content {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #fff;
  margin: 1.6vh auto;
}

.text {
  font-size: 14px;
}

.item {
  padding: 2.9vh 0;
}

.menuTitle {
  height: 4.9vh;
  line-height: 4.9vh;
  text-align: left;
  margin-left: 2.2vw;
}

.el-breadcrumb {
  height: 2.9vh;
  line-height: 2.9vh;
}

.menuTitle .el-breadcrumb__item {
  font-size: 14px;
}

.searchArea {
  width: 100%;
  min-height: 45vh;
}

.searchinput {
  width: 37.1vw;
  height: 8.1vh;
  line-height: 8.1vh;
  margin-left: 2.2vw;
}

.searchinput input {
  border-radius: 5px;
  display: inline-block;
  width: 22.2vw;
  height: 6.5vh;
  line-height: 6.5vh;
  outline: none;
  border: 1px solid rgba(238, 238, 238);
}

.searchinput input:focus {
  border: 1px solid rgba(255, 101, 0);
}

.searchinput button {
  width: 5.9vw;
  height: 6.7vh;
  line-height: 6.7vh;
  text-align: center;
  background-color: rgba(255, 101, 0);
  color: white;
  border: 1px solid rgba(255, 101, 0);
  border-radius: 5px;
}

.searchchoose {
  width: 100%;
  height: 38.2vh;
}

.searchchoose ul {
  width: 74.1vw;
  margin-bottom: 0px;
  overflow: hidden;
  position: relative;
  padding-bottom: 1.3vh;
  left: 2.2vw;
  top: 1.6vh;
}

.searchchoose ul li {
  height: 8.1vh;
}

.searchchoose ul li:first-child {
  height: 13vh;
}

.searchchoose ul li .list-key {
  float: left;
  color: #000000;
  height: 3.9vh;
  line-height: 3.9vh;
  width: 4.8vw;
  font-size: 15px;
}

.listSpan .iconfont {
  float: left;
  font-size: 14px;
  padding: 0.8vh 0.4vw 0px 0px;
  color: #999999;
}

.listSpan .more-search {
  position: absolute;
  float: left;
  width: 66.7vw;
  left: 7.4vw;
}

.listSpan .more-search .linkStyle {
  padding: 0px 1.5vw 2vh 0px;
  color: #999;
  display: inline-block;
  line-height: 3.9vh;
  font-size: 16px;
  transition: all 0.4s;
}

.listSpan .more-search span:hover {
  color: rgba(255, 101, 0);
  cursor: pointer;
}

.active {
  color: rgba(255, 101, 0);
}

.result {
  width: 100%;
  height: 150vh;
}

.result #myTable {
  text-align: center;
  width: 100%;
  color: #55595f;
  font-size: 16px;
  border-collapse: collapse;
}

.result #myTable .line {
  display: flex;
  flex-direction: column;
  margin-left: 1vw;
  height: 16.3vh;
  float: left;
  width: 32%;
  margin-bottom: 1.6vh;
}

.line /deep/ .el-card__body {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 1.5vw 3.3vh;
}

.school_icon {
  width: 3.7vw;
  text-align: left;
}

.school_icon img {
  width: 100%;
}

.name_des {
  margin-left: 0.7vw;
  margin-bottom: 1.6vh;
  width: 18.5vw;
  height: 8.1vh;
}

.name_des .top_item {
  margin-bottom: 1.6vh;
  height: 4.2vh;
  line-height: 4.2vh;
  display: flex;
}

.link_name {
  color: #333;
  font-size: 18px;
  height: 100%;
  display: inline-block;
  margin-right: 0.7vw;
  font-weight: bold;
}

.link_name:hover {
  color: rgba(255, 101, 0);
}

.am_l {
  transition: all 0.4s;
}

.float_l {
  float: left;
}

.right_l {
  float: right;
}

.top_item .link_ame .city {
  height: 4.2vh;
  line-height: 3.9vh;
  font-size: 12px;
  border: 1px solid #eeeeee;
  color: #555555;
  padding: 0 0.7vw;
  margin: 0 1.5vw 0 1.1vw;
  vertical-align: top;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.bottom_item .tag_item {
  float: left;
  color: #555555;
  font-size: 14px;
  padding-right: 0.7vw;
  margin-right: 0.7vw;
  border-right: 1px solid #c5c5c5;
  line-height: 2.4vh;
  cursor: pointer;
}

.line /deep/ .el-button {
  margin-top: 0.7vw;
  width: 5.8vw;
  height: 6.5vh;
  margin-right: 0.7vw;
}

.oldStyle {
  background-color: rgba(255, 101, 0);
  color: #fff;
  border: rgba(255, 101, 0);
}

.newStyle {
  color: rgba(0, 0, 0, 0.4);
  background-color: rgba(231, 231, 231, 0.5);
}

.pagination {
  width: 29.7vw;
  margin: 0.7vh auto;
  height: 6.5vh;
  line-height: 6.5vh;
}
</style>
